<!-- @format -->
<template>
  <div>
    <input
      type="text"
      v-if="isShow"
      ref="input" />

    <button
      v-else
      @click="fn">
      点击搜索
    </button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShow: false
      }
    },
    methods: {
      async fn() {
        // 1. 当输入框显示
        this.isShow = true

        // 2. 让输入框自动聚焦
        // this.$refs.input.focus() // 直接操作，会报错，因为数据变了，DOM的更新是异步的，需要排队

        // 第1种写法(回调)：
        this.$nextTick(() => {
          this.$refs.input.focus()
        })

        // 注意: $nextTick()返回的是Promise实例，如果不想写回调，可以配合async+await
        // 第2种写法(aysnc+await,不写回调)
        await this.$nextTick()
        this.$refs.input.focus()
      }
    }
  }
</script>

<style></style>
